<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
    <style>
		a {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		.img {
			display: flex;
			flex-wrap: wrap;
		}
		.img img{
			width: 210px;
			height: 210px;
			object-fit: cover;
			margin: 15px;
		}
		.form-control {
			height: auto;
		}
		#cboxClose{
			text-indent: 0;
			font-size: 50px;
			font-weight: bold;
			margin-top: 10px;
			color: red;
		}
		.ace-thumbnails li {
			margin: 0 10px;
		}
    </style>
	<div class="page-header">
		<h1><?=isset($activity) ? '编辑德育活动' : '发布德育活动'?></h1>
	</div>
	<div class="col-xs-12">
		<form class="form-horizontal">
            <input type="hidden" name="id" value="<?=isset($activity) ? $activity['id'] : 0?>" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">学生名称：</label>
				<div class="col-sm-6">
					<select class="chosen-select form-control tag-input-style" data-placeholder="选择学生" name="student_id">
						<?php foreach($studentList as $student): ?>
							<option value="<?=$student['id']?>" <?= isset($activity) && $student['id'] == $activity['student_id'] ? 'selected' : '' ?>><?=$student['realname']?></option>
						<?php endforeach; ?>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">活动时间：</label>
				<div class="col-sm-6">
					<input class="form-control" id="datetime-picker" type="text" name="act_time" value="<?=isset($activity) ? $activity['act_time'] : date('Y-m-d H:i:s')?>" placeholder="请填写活动时间"/>
				</div>
            </div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">活动时长（分钟）：</label>
				<div class="col-sm-6">
					<input class="form-control" type="number" name="duration" value="<?=isset($activity) ? $activity['duration'] : 60?>" placeholder="请填写活动时长"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">活动方式：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="mode" value="<?=isset($activity) ? $activity['mode'] : ''?>" placeholder="请填写活动方式"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">活动地点：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="dest" value="<?=isset($activity) ? $activity['dest'] : ''?>" placeholder="请填写活动地点"/>
				</div>
			</div>
            <div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">活动内容：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="content" name="content" style="height: 120px;width: 100%"><?=isset($activity) ? urldecode($activity['content']) : ''?></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">活动收获：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="harvest" name="harvest" style="height: 120px;width: 100%"><?=isset($activity) ? urldecode($activity['harvest']) : ''?></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">评语：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="remark" name="remark" style="height: 120px;width: 100%"><?=isset($activity) ? urldecode($activity['remark']) : ''?></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">证明材料：</label>
				<div class="col-sm-6">
					<div class="form-control">
						<div class="img">
							<ul class="ace-thumbnails clearfix">
								<li>
									<a href="javascript:;" id="upload-img" style="height: 240px;">
										<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" />
									</a>
								</li>
								<?php if(isset($activity['imgArr'])): ?>
									<?php foreach($activity['imgArr'] as $image): ?>
										<li>
											<a href="<?=$image?>" data-rel="colorbox" class="cboxElement">
												<img class="img-material" src="<?=$image?>" width="150" height="150" class="fit-cover">
												<div class="text">
													<div class="inner"></div>
												</div>
											</a>
											<div class="tools tools-bottom">
												<a href="javascript:;" class="red image-delete">
													<i class="ace-icon fa fa-trash"></i>
												</a>
											</div>
										</li>
									<?php endforeach; ?>
								<?php endif ?>		
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
		</form>
	</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 百度编辑器 -->
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.config.js"></script>
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	$(function(){
		// 上传图片对象
		$("#upload-img").uploader({
			"server":  '<?=UP_FORM_URL?>',
			"authorization": "<?=$signature?>",
			"policy": "<?=$policy?>",
			"callback": function(response) {
				var imgFile = "<?=UP_URL?>" + response.url;
				$(".ace-thumbnails").append('\
					<li>\
						<a href="' + imgFile + '" data-rel="colorbox" class="cboxElement">\
							<img class="img-material" src="' + imgFile + '" width="150" height="150" class="fit-cover">\
							<div class="text">\
								<div class="inner"></div>\
							</div>\
						</a>\
						<div class="tools tools-bottom">\
							<a href="javascript:;" class="red image-delete">\
								<i class="ace-icon fa fa-trash"></i>\
							</a>\
						</div>\
					</li>\
				');
				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
			}
		});
		// 初始化编辑器
		var ue = UE.getEditor('content');
		var ue2 = UE.getEditor('harvest');
		var ue3 = UE.getEditor('remark');
		// 日期时间选择器
		$('#datetime-picker').datetimepicker({
			format: 'YYYY-MM-DD HH:mm:ss',
			icons: {
				time: 'fa fa-clock-o',
				date: 'fa fa-calendar',
				up: 'fa fa-chevron-up',
				down: 'fa fa-chevron-down',
				previous: 'fa fa-chevron-left',
				next: 'fa fa-chevron-right',
				today: 'fa fa-arrows ',
				clear: 'fa fa-trash',
				close: 'fa fa-times'
			}
		}).next().on(ace.click_event, function(){
			$(this).prev().focus();
		});
		// 提交表单
		$(".submit").click(function() {
			// alert(1);
			var id = $("[name=id]").val();
			var studentId = $("[name=student_id]").val();
			var mode = $("[name=mode]").val();
			var dest = $("[name=dest]").val();
			var actTime = $("[name=act_time]").val();
			var duration = $("[name=duration]").val();
			var content = $("[name=content]").val();
			var harvest = $("[name=harvest]").val();
			var remark = $("[name=remark]").val();
			var imgArr = new Array();
			$(".ace-thumbnails .img-material").each(function() {
				if($(this).css('display') != 'none') {
					imgArr.push($(this).attr("src"));
				}
			});
			var url = "<?=admin_url('moral/save_activity_action')?>";
			var data = {
				"id": id,
				"student_id": studentId,
				"mode": mode,
				"dest": dest,
				"act_time": actTime,
				"duration": duration,
				"content": content,
				"harvest": harvest,
				"remark": remark,
				"material": imgArr
			};
			ajax_post(url, data, function() {
				window.location.href = "<?=admin_url('moral/activity')?>";
			});
		});

		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		// 删除图片
		$("body").on("click", ".image-delete", function(e){
			var that = $(this);
			layer.confirm('确定删除该图片吗？', function(index){
				that.parents("li").find(".img-material").hide();
				layer.close(index);
			});
		})
	})
</script>